<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频播放器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: #000;
            color: #fff;
            overflow: hidden;
            height: 100vh;
        }

        .player-container {
            width: 100vw;
            height: 100vh;
            position: relative;
            background: #000;
        }

        .video-wrapper {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        video {
            max-width: 100%;
            max-height: 100%;
            width: auto;
            height: auto;
            object-fit: contain;
        }

        .controls {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.8));
            padding: 20px;
            opacity: 0;
            transition: opacity 0.3s ease;
            display: flex;
            align-items: center;
            gap: 15px;
        }

        .player-container:hover .controls {
            opacity: 1;
        }

        .control-btn {
            background: rgba(255,255,255,0.2);
            border: none;
            color: #fff;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background 0.3s;
        }

        .control-btn:hover {
            background: rgba(255,255,255,0.3);
        }

        .progress-bar {
            flex: 1;
            height: 6px;
            background: rgba(255,255,255,0.3);
            border-radius: 3px;
            cursor: pointer;
            position: relative;
        }

        .progress-fill {
            height: 100%;
            background: #ff4444;
            border-radius: 3px;
            width: 0%;
            transition: width 0.1s;
        }

        .time-display {
            font-size: 14px;
            color: #fff;
            min-width: 100px;
            text-align: center;
        }

        .error-message {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(255,0,0,0.9);
            color: #fff;
            padding: 20px;
            border-radius: 10px;
            text-align: center;
            max-width: 80%;
            z-index: 1000;
        }

        .autoplay-error {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.9);
            color: #fff;
            padding: 30px;
            border-radius: 15px;
            text-align: center;
            max-width: 400px;
            z-index: 1000;
        }

        .autoplay-error h3 {
            margin-bottom: 15px;
            color: #ff4444;
        }

        .autoplay-error p {
            margin-bottom: 20px;
            line-height: 1.5;
        }

        .autoplay-btn {
            background: #ff4444;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
            transition: background 0.3s;
        }

        .autoplay-btn:hover {
            background: #ff6666;
        }

        .loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
            font-size: 18px;
            z-index: 1000;
        }

        .spinner {
            width: 40px;
            height: 40px;
            border: 4px solid rgba(255,255,255,0.3);
            border-top: 4px solid #fff;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        .hidden {
            display: none !important;
        }
    </style>
</head>
<body>
    <div class="player-container" id="playerContainer">
        <div class="video-wrapper">
            <video id="videoPlayer" preload="metadata" muted playsinline>
                您的浏览器不支持视频播放。
            </video>
        </div>

        <div class="controls" id="controls">
            <button class="control-btn" id="playPauseBtn" title="播放/暂停">▶️</button>
            <div class="progress-bar" id="progressBar">
                <div class="progress-fill" id="progressFill"></div>
            </div>
            <div class="time-display" id="timeDisplay">00:00 / 00:00</div>
            <button class="control-btn" id="fullscreenBtn" title="全屏">⛶</button>
        </div>

        <div class="loading hidden" id="loading">
            <div class="spinner"></div>
            <div>正在加载视频...</div>
        </div>

        <div class="error-message hidden" id="errorMessage">
            <div id="errorText">视频加载失败</div>
        </div>

        <div class="autoplay-error hidden" id="autoplayError">
            <h3>🔇 需要用户交互</h3>
            <p>由于浏览器安全策略，视频需要用户交互后才能播放。请点击下方按钮开始播放。</p>
            <button class="autoplay-btn" onclick="window.videoPlayer.handleAutoplayClick()">点击播放视频</button>
        </div>
    </div>

    <script>
        class VideoPlayer {
            constructor() {
                this.video = document.getElementById('videoPlayer');
                this.container = document.getElementById('playerContainer');
                this.controls = document.getElementById('controls');
                this.loading = document.getElementById('loading');
                this.errorMessage = document.getElementById('errorMessage');
                
                this.playPauseBtn = document.getElementById('playPauseBtn');
                this.fullscreenBtn = document.getElementById('fullscreenBtn');
                this.progressBar = document.getElementById('progressBar');
                this.progressFill = document.getElementById('progressFill');
                this.timeDisplay = document.getElementById('timeDisplay');
                
                this.isPlaying = false;
                
                this.init();
            }
            
            init() {
                this.bindEvents();
                this.checkUrlParams();
                this.setupPostMessage();
            }
            
            bindEvents() {
                this.playPauseBtn.addEventListener('click', () => this.togglePlay());
                this.fullscreenBtn.addEventListener('click', () => this.toggleFullscreen());
                this.progressBar.addEventListener('click', (e) => this.seek(e));
                
                this.video.addEventListener('loadstart', () => this.onLoadStart());
                this.video.addEventListener('loadedmetadata', () => this.onLoadedMetadata());
                this.video.addEventListener('canplay', () => this.onCanPlay());
                this.video.addEventListener('play', () => this.onPlay());
                this.video.addEventListener('pause', () => this.onPause());
                this.video.addEventListener('timeupdate', () => this.onTimeUpdate());
                this.video.addEventListener('ended', () => this.onEnded());
                this.video.addEventListener('error', (e) => this.onError(e));
                this.video.addEventListener('waiting', () => this.onWaiting());
                this.video.addEventListener('playing', () => this.onPlaying());
                
                document.addEventListener('keydown', (e) => this.handleKeyPress(e));
                
                let hideTimeout;
                this.container.addEventListener('mousemove', () => {
                    this.controls.style.opacity = '1';
                    clearTimeout(hideTimeout);
                    hideTimeout = setTimeout(() => {
                        if (!this.isPlaying) return;
                        this.controls.style.opacity = '0';
                    }, 3000);
                });
            }
            
            checkUrlParams() {
                const urlParams = new URLSearchParams(window.location.search);
                const videoUrl = urlParams.get('video') || urlParams.get('url') || urlParams.get('src');
                
                if (videoUrl) {
                    this.loadVideo(videoUrl);
                }
            }
            
            setupPostMessage() {
                window.addEventListener('message', (event) => {
                    if (event.data && event.data.type === 'loadVideo') {
                        this.loadVideo(event.data.url);
                    } else if (event.data && event.data.type === 'play') {
                        this.play();
                    } else if (event.data && event.data.type === 'pause') {
                        this.pause();
                    } else if (event.data && event.data.type === 'stop') {
                        this.stop();
                    } else if (event.data && event.data.type === 'seek') {
                        this.seekTo(event.data.time);
                    }
                });
                
                // 页面加载完成后通知父页面
                window.addEventListener('load', () => {
                    if (window.parent && window.parent !== window) {
                        window.parent.postMessage({type: 'contentLoaded'}, '*');
                    }
                });
            }
            
            loadVideo(url) {
                this.showLoading();
                this.hideError();
                this.video.src = url;
                this.video.load();
                
                // 设置视频属性以支持自动播放
                this.video.muted = true; // 静音是自动播放的必要条件
                this.video.playsInline = true; // 支持内联播放
            }
            
            togglePlay() {
                if (this.video.paused) {
                    this.play();
                } else {
                    this.pause();
                }
            }
            
            play() {
                // 确保视频是静音的，这是自动播放的必要条件
                this.video.muted = true;
                
                this.video.play().catch(error => {
                    console.error('播放失败:', error);
                    
                    // 如果是自动播放策略错误，提供用户交互按钮
                    if (error.name === 'NotAllowedError' && error.message.includes('user didn\'t interact')) {
                        this.showAutoplayError();
                    } else {
                        this.showError('播放失败: ' + error.message);
                    }
                });
            }
            
            pause() {
                this.video.pause();
            }
            
            stop() {
                this.video.pause();
                this.video.currentTime = 0;
            }
            
            toggleFullscreen() {
                if (!document.fullscreenElement) {
                    this.container.requestFullscreen().catch(err => {
                        console.error('全屏失败:', err);
                    });
                } else {
                    document.exitFullscreen();
                }
            }
            
            seek(event) {
                const rect = this.progressBar.getBoundingClientRect();
                const clickX = event.clientX - rect.left;
                const percentage = clickX / rect.width;
                const newTime = percentage * this.video.duration;
                this.video.currentTime = newTime;
            }
            
            seekTo(time) {
                this.video.currentTime = time;
            }
            
            handleKeyPress(event) {
                switch(event.code) {
                    case 'Space':
                        event.preventDefault();
                        this.togglePlay();
                        break;
                    case 'ArrowLeft':
                        event.preventDefault();
                        this.video.currentTime -= 10;
                        break;
                    case 'ArrowRight':
                        event.preventDefault();
                        this.video.currentTime += 10;
                        break;
                    case 'KeyF':
                        event.preventDefault();
                        this.toggleFullscreen();
                        break;
                }
            }
            
            onLoadStart() {
                this.showLoading();
                this.notifyParent('contentLoading');
            }
            
            onLoadedMetadata() {
                this.hideLoading();
                this.notifyParent('contentLoaded');
            }
            
            onCanPlay() {
                this.hideLoading();
                this.hideAutoplayError();
                this.notifyParent('contentReady');
            }
            
            onPlay() {
                this.isPlaying = true;
                this.playPauseBtn.textContent = '⏸️';
            }
            
            onPause() {
                this.isPlaying = false;
                this.playPauseBtn.textContent = '▶️';
            }
            
            onTimeUpdate() {
                const current = this.video.currentTime;
                const duration = this.video.duration;
                
                if (duration > 0) {
                    const percentage = (current / duration) * 100;
                    this.progressFill.style.width = percentage + '%';
                    
                    const currentTime = this.formatTime(current);
                    const totalTime = this.formatTime(duration);
                    this.timeDisplay.textContent = `${currentTime} / ${totalTime}`;
                }
            }
            
            onEnded() {
                this.isPlaying = false;
                this.playPauseBtn.textContent = '▶️';
            }
            
            onError(event) {
                this.hideLoading();
                const error = this.video.error;
                let errorMessage = '视频加载失败';
                
                if (error) {
                    switch(error.code) {
                        case 1:
                            errorMessage = '视频加载被中止';
                            break;
                        case 2:
                            errorMessage = '网络错误';
                            break;
                        case 3:
                            errorMessage = '视频解码失败';
                            break;
                        case 4:
                            errorMessage = '视频格式不支持';
                            break;
                    }
                }
                
                this.showError(errorMessage);
                this.notifyParent('contentError', errorMessage);
            }
            
            onWaiting() {
                this.showLoading();
            }
            
            onPlaying() {
                this.hideLoading();
            }
            
            formatTime(seconds) {
                if (isNaN(seconds)) return '00:00';
                
                const hours = Math.floor(seconds / 3600);
                const minutes = Math.floor((seconds % 3600) / 60);
                const secs = Math.floor(seconds % 60);
                
                if (hours > 0) {
                    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
                } else {
                    return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
                }
            }
            
            showLoading() {
                this.loading.classList.remove('hidden');
            }
            
            hideLoading() {
                this.loading.classList.add('hidden');
            }
            
            showError(message) {
                this.errorMessage.classList.remove('hidden');
                document.getElementById('errorText').textContent = message;
            }
            
            hideError() {
                this.errorMessage.classList.add('hidden');
            }
            
            showAutoplayError() {
                this.autoplayError = document.getElementById('autoplayError');
                this.autoplayError.classList.remove('hidden');
            }
            
            hideAutoplayError() {
                if (this.autoplayError) {
                    this.autoplayError.classList.add('hidden');
                }
            }
            
            handleAutoplayClick() {
                this.hideAutoplayError();
                this.play();
            }
            
            // 向父页面发送消息
            notifyParent(type, message = '') {
                if (window.parent && window.parent !== window) {
                    window.parent.postMessage({
                        type: type,
                        message: message
                    }, '*');
                }
            }
        }
        
        const player = new VideoPlayer();
        window.videoPlayer = player;
        
        console.log('视频播放器已加载完成');
        console.log('支持通过URL参数加载视频: ?video=视频地址');
        console.log('支持通过postMessage加载视频: {type: "loadVideo", url: "视频地址"}');
        console.log('键盘快捷键: 空格(播放/暂停), 左右箭头(快退/快进), F(全屏)');
    </script>
</body>
</html> 